<template>
  <div v-if="list.length !== 0" class="global-nav-btns">
    <el-scrollbar :noresize="false">
      <template v-for="(item, index) in list">
        <div v-if="!item.noshow" :key="index" class="btns-item" :class="[{ active: active === item[prop.value] }]">
          <div class="nav-item" @click="handleclick(item, index, item[prop.value])">
            <i :class="[item.icon]" />
            {{ item[prop.label] }}
            <span v-if="item.num">{{'('+ item.num +')'}}</span>
          </div>
        </div>
      </template>
    </el-scrollbar>
  </div>
</template>
<script>
  /**
   * 按钮操作区
   * @param {Array} list
   * label 按钮名称
   * icon 按钮icon
   * click 按钮事件
   * noshow 是否不展示
   * disabled 是否禁用
   */
  export default {
    props: {
      prop: {
        type: Object,
        default: () => {
          return {
            label: 'label',
            value: 'active'
          }
        }
      },
      list: {
        type: Array,
        default: () => {
          return []
        }
      },
      active: {
        type: [String, Number],
        default: ''
      },
    },
    methods: {
      handleclick(item, index, active) {
        this.$emit('change', {
          data: item,
          index,
          active
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .global-nav-btns {
    height: 52px;
    line-height: 51px;
    padding: 0 20px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    .btns-item {
      display: inline-block;
      padding-right: 50px;
      font-size: 16px;
      .nav-item {
        cursor: pointer;
        user-select: none;
        position: relative;
      }

      .el-button--text {
        color: #333;
      }
      &.active {
        .nav-item::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          border-bottom: 3px solid #409EFF;
        }
        color: #409EFF;
        font-weight: bold;
      }
    }
  }
</style>
